<script setup lang="ts">
import { computed, ref, watch } from "vue";
import type { UserAddress } from "@/types/detailTypes/detailTypes.ts";
import useOrderStore from "@/pinia/modules/orderStore/orderStore.ts";

import Button from "@/components/lib/Button.vue";

interface Props {
   address: UserAddress[];
}

const props = withDefaults(defineProps<Props>(), {
   address: (): UserAddress[] => ([]),
});

interface Emits {
   (e: "getAddress", address: UserAddress): void;
}

const emits = defineEmits<Emits>();


const orderStore = useOrderStore();

const visible = ref<boolean>(false);

const selectAddress = ref<UserAddress>({} as UserAddress);

const defaultAddress = computed({
   get() {
      const address: UserAddress | undefined = props!.address.find(item => item.isDefault === 0);
      if (address) {
         return address;
      } else if (props.address.length) {
         return props.address[0];
      } else {
         return {} as UserAddress;
      }
   },
   set(newValue: UserAddress) {
      orderStore.orderInfo.userAddresses.forEach(item => item.isDefault = 1);
      const currentAddress: UserAddress | undefined = orderStore.orderInfo.userAddresses.find(item => item.id === newValue.id);
      currentAddress!.isDefault = 0;
   },
});


const handleSelectAddress = (address: UserAddress) => {
   selectAddress.value = address;
};


const submit = () => {
   emits("getAddress", selectAddress.value);
   defaultAddress.value = selectAddress.value;
   visible.value = false;
};

watch(() => defaultAddress.value, (newValue: UserAddress) => {
   emits("getAddress", newValue);
});

</script>

<template>
   <div class="address" v-if="address">

      <div class="text">
         <div class="none" v-if="!defaultAddress.id">您需要先添加收货地址才可提交订单。</div>
         <ul v-else>
            <li><span>收<i />货<i />人：{{ defaultAddress.receiver }}</span></li>
            <li><span>联系方式：</span>{{ defaultAddress.contact }}</li>
            <li><span>收货地址：</span>{{ defaultAddress.fullLocation }}{{ defaultAddress.address }}</li>
         </ul>
         <a>修改地址</a>
      </div>
      <div class="action">
         <Button class="btn" @click="visible=true">切换地址</Button>
         <Button class="btn">添加地址</Button>
      </div>

      <el-dialog v-model="visible" title="切换地址" width="35%">
         <div class="text item" :class="{active:item.id===selectAddress.id}" v-for="item in address" :key="item.id" @click="handleSelectAddress(item)">
            <ul>
               <li><span>收<i />货<i />人：</span>{{ item.receiver }}</li>
               <li><span>联系方式：</span>{{ item.contact }}</li>
               <li><span>收货地址：</span>{{ item.fullLocation.replace(/ /g, "") + item.address }}</li>
            </ul>
         </div>
         <div class="btn-box">
            <Button type="plain">取消</Button>
            <Button @click="submit">确定</Button>
         </div>
      </el-dialog>


   </div>
</template>

<style scoped lang="less">
.address {
   border: 1px solid #f5f5f5;
   display: flex;
   align-items: center;

   .text {
      flex: 1;
      min-height: 90px;
      display: flex;
      align-items: center;

      .none {
         line-height: 90px;
         color: #999;
         text-align: center;
         width: 100%;
      }

      > ul {
         flex: 1;
         padding: 20px;

         li {
            line-height: 30px;

            span {
               color: #999;
               margin-right: 5px;

               > i {
                  width: 0.5em;
                  display: inline-block;
               }
            }
         }
      }

      > a {
         color: @xtxColor;
         width: 160px;
         text-align: center;
         height: 90px;
         line-height: 90px;
         border-right: 1px solid #f5f5f5;
      }

      &.item {
         border: 1px solid #f5f5f5;
         margin-bottom: 10px;
         cursor: pointer;

         &.active, &:hover {
            border-color: @xtxColor;
            background: lighten(@xtxColor, 50%);
         }

         > ul {
            padding: 10px;
            font-size: 14px;
            line-height: 30px;
         }
      }
   }

   .action {
      width: 420px;
      text-align: center;

      .btn {
         width: 140px;
         height: 46px;
         line-height: 44px;
         font-size: 14px;

         &:first-child {
            margin-right: 10px;
         }
      }
   }


   :deep(.el-dialog__body) {
      height: 600px;
      overflow: scroll;

      .btn-box {
         text-align: center;

         .button {
            margin: 0 10px;
         }
      }
   }
}
</style>
